<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 多行省略（WebKit内核） */
        .multi-line-ellipsis {
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 400px;
          line-height: 1.5; /* 保持行间距 */
          display: flex;
          align-items: center;         /* 垂直居中 */
          height: 56px;                /* 需指定固定高度 */
          white-space: nowrap;
        }
        .breadcrumb {
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .breadcrumb ul {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .breadcrumb li {
            display: flex;
            align-items: center;
        }
        .breadcrumb li:not(:last-child)::after {
            content: '>';
            margin: 0 10px;
            color: #999;
        }
        .breadcrumb a {
            text-decoration: none;
            color: #3498db;
            transition: color 0.3s;
        }
        .breadcrumb a:hover {
            color: #2980b9;
            text-decoration: underline;
        }
        .breadcrumb .current {
            color: #7f8c8d;
            pointer-events: none;
        }
        .json-container {
      padding: 15px;
      background: #f8f8f8;
      border-radius: 5px;
      max-height: 70vh;
      overflow: auto;
      font-family: Consolas, Monaco, monospace;
      line-height: 1.2;
    }
    .json-key {
      color: #92278f;
      font-weight: bold;
    }
    .json-string {
      color: #3ab54a;
      white-space: pre-wrap;
      word-break: break-word;
      word-wrap: break-word;
    }
    .json-number { color: #25aae2; }
    .json-boolean { color: #f98280; }
    .json-null { color: #f1592a; }
    .json-collapse {
      cursor: pointer;
      display: inline-block;
      width: 16px;
      text-align: center;
    }
    .json-line {
      display: block;
      min-height: 20px;
    }
    .json-hidden { display: none; }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 100;
        }
        .modal.active {
            display: flex;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background: #4CAF50;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        .form-group {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
        }
        label {
          width: 110px;
          text-align: right;
          padding-left: 5px;
        }
        input[type="text"], input[type="url"] {
            width: 500px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: inline-block;
            padding-bottom: 0px;
            padding-left: 5px;
            margin-left: 15px;
        }
        label[typeof="radio"] {
            width: 80px;
            display: inline-flex;
            padding-left: 20px;
        }
        .radio-group {
            display: flex;
            gap: 15px;
            margin: 10px 0;
        }
        .hidden {
            display: none;
        }
        .btn-submit {
            background: #1890ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
                .modal.active {
            display: flex;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .tab-btn.active {
            background: #3B82F6;
            color: white;
        }

        .form-container {
            width: 480px;
            box-sizing: border-box;
            padding: 10px;
        }
        .rule-table {
            width: 100%;
            border-collapse: collapse;
        }
        .rule-table th, .rule-table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        .rule-table th {
            background-color: #f5f5f5;
        }
        .rule-table input[type="radio"] {
            margin: 0 5px;
        }
        .rule-table .rule-input {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
            margin-left: 0px;
        }
        .toggle-btn {
            position: relative;
            width: 40px;
            height: 20px;
            -webkit-appearance: none;
            background: #cbd5e1;
            border-radius: 20px;
            transition: .3s;
            outline: none;
            cursor: pointer;
        }
        .toggle-btn:checked {
            background: #4f46e5;
        }
        .toggle-btn:before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            background: white;
            transition: .3s;
        }
        .toggle-btn:checked:before {
            left: 22px;
        }
    </style>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-6xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <div class="breadcrumb">
            <ul>
                <li><a href="/website_list"><h3 class="text-2xl font-bold">首页</h3></a></li>
                <li><a href="node_list?website_id={{website_id}}"><h3 class="text-2xl font-bold">{{website_data.website_name}}</h3></a></li>
            </ul>
        </div>
        <button id="addBtn" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            <i class="fas fa-plus mr-2"></i>新增节点
        </button>
    </div>

    <div class="bg-white rounded shadow overflow-hidden">
        <table class="min-w-full">
            <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left">节点名称</th>
                <th class="px-6 py-3 text-left">节点链接</th>
                <th class="px-6 py-3 text-left">节点类型</th>
                <th class="px-6 py-3 text-left">监测状态</th>
                <th class="px-6 py-3 text-left">更新时间</th>
                <th class="px-6 py-3 text-left">操作</th>
            </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">

            {% for node in node_list %}
            <tr>
                <td class="px-6 py-4">{{node.column_name}}</td>
                <td class="multi-line-ellipsis tooltip-container">{{node.column_url}}</td>
                <td class="px-6 py-4">
                    {% if node.node_type is 0 %}
                    动态
                    {% elif node.node_type is 1 %}
                    静态
                    {% elif node.node_type is 2 %}
                    详情
                    {% endif %}
                </td>
                <td class="px-6 py-4">
                    <label class="switch">
                        <input onclick="UpStatus(this)" data-id="{{node.id}}" type="checkbox" {% if node.collect_status is 1%} checked {%endif%}>
                        <span class="slider"></span>
                    </label>
                </td>
                <td class="px-6 py-4">{{node.create_time}}</td>
                <td class="px-6 py-4">
                    <button class="text-blue-500 mr-3"><a href="edit_node?id={{node.id}}" class="no-style-link"><i class="fas fa-edit">编辑</i></a>
                    </button>
                    <button class="text-red-500" onclick="deleteNode(this)" data-id="{{node.id}}"><i class="fas fa-trash">删除</i></button>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- 新增节点弹窗 -->
<div id="modal" class="modal items-center justify-center">
    <div class="bg-white rounded-lg w-full max-w-md" style="max-width:60rem; max-width:60rem;height: 564px;">
        <div class="flex justify-between items-center border-b px-6 py-4">
            <h3 class="text-lg font-medium">新增节点</h3>
            <button id="closeBtn" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="flex border-b">
            <button class="tab-btn active px-6 py-3" data-tab="dynamic" value=0>动态规则</button>
            <button class="tab-btn px-6 py-3" data-tab="static" value=1>静态规则</button>
            <button class="tab-btn px-6 py-3" data-tab="detail" value=2>详情规则</button>
        </div>


        <form id="nodeForm" action="create_node" method="POST">
            <!--动态规则表单-->
            <div id="dynamic-form" class="tab-content active" style="padding-top: 10px;">
                <input type="text" name="website_id" value="{{website_id}}" style="display: none; padding-top: 18px;">
                <input type="text" name="node_type" value=0 style="display: none;">
                <div class="form-group">
                    <label for="column_name">节点名称:</label>
                    <input type="text" name="column_name">
                </div>
                <div class="form-group">
                    <label for="column_url">节点URL:</label>
                    <input type="url" name="column_url">
                </div>
                <div class="form-group">
                    <label>节点规则类型:</label>
                    <div class="radio-group">
                        <label typeof="radio"><input type="radio" name="column_rule_type" value=0>XPATH</label>
                        <label typeof="radio"><input type="radio" name="column_rule_type" value=1>正则</label>
                        <label typeof="radio"><input type="radio" name="column_rule_type" value=2>JSON</label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="column_rule">节点规则内容:</label>
                    <input type="text" name="column_rule">
                </div>
                <div class="form-group">
                    <label for="column_prefix">节点链接前缀:</label>
                    <input type="text" name="column_prefix">
                </div>
                <div class="form-group">
                    <label for="page_rule">分页规则:</label>
                    <input type="text" name="page_rule">
                </div>
                <div class="form-group">
                    <label for="list_rule_type">列表规则类型:</label>
                    <div class="radio-group">
                        <label typeof="radio"><input type="radio" name="list_rule_type" value=0>XPATH</label>
                        <label typeof="radio"><input type="radio" name="list_rule_type" value=1>正则</label>
                        <label typeof="radio"><input type="radio" name="list_rule_type" value=2>JSON</label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="list_rule">列表规则内容:</label>
                    <input type="text" name="list_rule">
                </div>
                <div class="form-group">
                    <label for="list_prefix">详情链接前缀:</label>
                    <input type="text" name="list_prefix">
                </div>
                <div class="flex justify-end pt-4" style="padding-top: 42px;">
                    <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">保存</button>
                    <button type="button" onclick="Check(this)" value=0 class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">校验</button>
                    <button type="button" id="cancelBtn0" class="px-4 py-2 border rounded mr-3 hover:bg-gray-100">取消</button>
                </div>
            </div>
            <!--静态规则表单-->
            <div id="static-form" class="tab-content" style="padding-top: 10px">
                <input type="text" name="website_id" value="{{website_id}}" style="display: none;">
                <input type="text" name="node_type" value=1 style="display: none;">
                <div class="form-group">
                    <label for="column_name">节点名称:</label>
                    <input type="text" name="column_name">
                </div>
                <div class="form-group">
                    <label for="column_url">节点URL:</label>
                    <input type="url" name="column_url">
                </div>
                <div class="form-group">
                    <label>节点规则类型:</label>
                    <div class="radio-group">
                        <label typeof="radio"><input type="radio" name="column_rule_type" value=0>XPATH</label>
                        <label typeof="radio"><input type="radio" name="column_rule_type" value=1>正则</label>
                        <label typeof="radio"><input type="radio" name="column_rule_type" value=2>JSON</label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="column_rule">节点规则内容:</label>
                    <input type="text" name="column_rule">
                </div>
                <div class="form-group">
                    <label for="column_prefix">节点链接前缀:</label>
                    <input type="text" name="column_prefix" value="{str}">
                </div>
                <div class="form-group">
                    <label for="page_rule">分页规则:</label>
                    <input type="text" name="page_rule">
                </div>

                <div class="form-group">
                    <label for="city">城市:</label>
                    <input type="text" name="city">
                </div>
                <div class="form-group">
                    <label for="gender">性别:</label>
                    <input type="text" name="gender">
                </div>
                <div class="form-group">
                    <label for="season">季度:</label>
                    <input type="text" name="season">
                </div>
                <div class="flex justify-end pt-4" style="padding-top: 60px;">
                    <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">保存</button>
                    <button type="button" onclick="Check(this)" value=1 class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">校验</button>
                    <button type="button" id="cancelBtn1" class="px-4 py-2 border rounded mr-3 hover:bg-gray-100">取消</button>
                </div>
            </div>
            <!--详情规则表单-->
            <div id="detail-form" class="tab-content" style="padding-top: 10px;">
                <input type="text" name="website_id" value="{{website_id}}" style="display: none;">
                <input type="text" name="node_type" value=2 style="display: none;">
                <div class="form-group">
                    <label for="column_name" style="width: 79px;">详情链接:</label>
                    <input type="text" name="detail_url" style="width: 80%;">
                </div>

                <table class="rule-table">
                    <thead>
                    <tr>
                        <th width="5%">激活</th>
                        <th width="13%">字段</th>
                        <th width="28%">规则类型</th>
                        <th>规则内容</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" class="toggle-btn">
                        </td>
                        <td data-model-name="filed" data-value="brand">品牌</td>
                        <td>
                            <label>
                                <input type="radio" name="brand_rule_type" value=0 checked>
                                <span>XPATH</span>
                            </label>
                            <label>
                                <input type="radio" name="brand_rule_type" value=1>
                                <span>REG</span>
                            </label>
                            <label>
                                <input type="radio" name="brand_rule_type" value=2>
                                <span>JSON</span>
                            </label>
                        </td>
                        <td><input type="text" class="rule-input"></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" class="toggle-btn">
                        </td>
                        <td data-model-name="filed" data-value="name">商品名称</td>
                        <td>
                            <label>
                                <input type="radio" name="name_rule_type" value=0 checked>
                                <span>XPATH</span>
                            </label>
                            <label>
                                <input type="radio" name="name_rule_type" value=1>
                                <span>REG</span>
                            </label>
                            <label>
                                <input type="radio" name="name_rule_type" value=2>
                                <span>JSON</span>
                            </label>
                        </td>
                        <td><input type="text" class="rule-input"></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" class="toggle-btn">
                        </td>
                        <td data-model-name="filed" data-value="pubdate">发布时间</td>
                        <td>
                            <label>
                                <input type="radio" name="pubdate_rule_type" value=0 checked>
                                <span>XPATH</span>
                            </label>
                            <label>
                                <input type="radio" name="pubdate_rule_type" value=1>
                                <span>REG</span>
                            </label>
                            <label>
                                <input type="radio" name="pubdate_rule_type" value=2>
                                <span>JSON</span>
                            </label>
                        </td>
                        <td><input type="text" class="rule-input"></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" class="toggle-btn">
                        </td>
                        <td data-model-name="filed" data-value="desc">正文</td>
                        <td>
                            <label>
                                <input type="radio" name="desc_rule_type" value=0 checked>
                                <span>XPATH</span>
                            </label>
                            <label>
                                <input type="radio" name="desc_rule_type" value=1>
                                <span>REG</span>
                            </label>
                            <label>
                                <input type="radio" name="desc_rule_type" value=2>
                                <span>JSON</span>
                            </label>
                        </td>
                        <td><input type="text" class="rule-input"></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" class="toggle-btn">
                        </td>
                        <td data-model-name="filed" data-value="images">图片</td>
                        <td>
                            <label>
                                <input type="radio" name="images_rule_type" value=0 checked>
                                <span>XPATH</span>
                            </label>
                            <label>
                                <input type="radio" name="images_rule_type" value=1>
                                <span>REG</span>
                            </label>
                            <label>
                                <input type="radio" name="images_rule_type" value=2>
                                <span>JSON</span>
                            </label>
                        </td>
                        <td><input type="text" class="rule-input" placeholder="匹配规则&分割规则&拼接规则{str}"></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" class="toggle-btn">
                        </td>
                        <td data-model-name="filed" data-value="source_url">详情原链接</td>
                        <td></td>
                        <td><input type="text" class="rule-input" placeholder="响应为json时使用"></td>
                    </tr>
                    </tbody>
                </table>
                <div class="flex justify-end pt-4" style="padding-top: 6px;">
                    <button type="button" id="submitBtn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">保存</button>
                    <button type="button" onclick="Check(this)" value=2 class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">校验</button>
                    <button type="button" id="cancelBtn2" class="px-4 py-2 border rounded mr-3 hover:bg-gray-100">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
<!--<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous">-->
<script>
        const addBtn = document.getElementById('addBtn');
        const modal = document.getElementById('modal');
        const closeBtn = document.getElementById('closeBtn');
        const cancelBtn0 = document.getElementById('cancelBtn0');
        const cancelBtn1 = document.getElementById('cancelBtn1');
        const cancelBtn2 = document.getElementById('cancelBtn2');
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');

        addBtn.addEventListener('click', () => {
            modal.classList.add('active');
        });

        closeBtn.addEventListener('click', () => {
            modal.classList.remove('active');
        });

        cancelBtn0.addEventListener('click', () => {
            modal.classList.remove('active');
        });
        cancelBtn1.addEventListener('click', () => {
            modal.classList.remove('active');
        });
        cancelBtn2.addEventListener('click', () => {
            modal.classList.remove('active');
        });

        modal.addEventListener('click', (e) => {
            if(e.target === modal) {
                modal.classList.remove('active');
            }
        });
        // 切换标签页
        tabBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // 移除所有active类
                tabBtns.forEach(b => b.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));

                // 添加active类到当前点击的按钮和对应内容
                btn.classList.add('active');
                const tabId = btn.dataset.tab + '-form';
                document.getElementById(tabId).classList.add('active');
            });
        });

    document.getElementById('nodeForm').addEventListener('submit', function(e) {
        // 获取所有标签页内容区域
        const tabContents = document.querySelectorAll('.tab-content');

        // 遍历并移除非活动标签页的输入元素
        tabContents.forEach(tab => {
            if(!tab.classList.contains('active')) {
                const inputs = tab.querySelectorAll('input');
                inputs.forEach(input => {
                    input.disabled = true;  // 禁用非活动输入框
                });
            }
        });
        location.reload(true);
    });

    $('#submitBtn').click(function() {
        const rows = document.getElementById('detail-form').querySelectorAll('tbody tr');
        const result = [];
        rows.forEach(row => {
            var rowData;
            const label_name = row.querySelector('[data-model-name="filed"]').getAttribute('data-value')
            console.log(name)
            if (label_name != 'source_url'){
                rowData ={
                    checked: row.querySelector('.toggle-btn').checked ? 'on' : 'off',
                    rule_type: row.querySelector('input[type="radio"]:checked').value,
                    value: row.querySelector('[class="rule-input"]').value
                };
            }else{
                rowData ={
                    checked: row.querySelector('.toggle-btn').checked ? 'on' : 'off',
                    rule_type: '',
                    value: row.querySelector('[class="rule-input"]').value
                };
            }
            const labelData = {[label_name]: rowData}
            result.push(labelData);
        });
        console.log(result)

        const params = {
            detail_url: document.querySelector('#detail-form input[name="detail_url"]').value,
            website_id: document.querySelector('#detail-form input[name="website_id"]').value,
            node_type: document.querySelector('#detail-form input[name="node_type"]').value,
            column_rule: result
        }
        $.ajax({
            url: '/website/create_node',
            type: 'POST',
            data: params,
            success: function(response) {
                alert(response.message);
                location.reload()
            },
            error: function(xhr) {
                $('#responseOutput').text('错误: ' + xhr.status + ' ' + xhr.statusText);
                $('#responseContainer').removeClass('hidden');
            }
        });
    });

    function deleteNode(e){
        const _id = $(e).attr('data-id');
        $.ajax({
            url: '/website/delete_node',
            type: 'get',
            data: {'id': _id},
            success: function (res) {
                if (res.code===200){
                    alert(res.message)
                    location.reload()
                }else if (res.code===400){
                    alert(res.message)
                }else {
                    alert('系统异常')
                }
            }
        })
    }
    function formatJson(json) {
        if (typeof json !== 'string') {
            json = JSON.stringify(json, null, 2);
        }
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
        function(match) {
            var cls = 'json-number';
            if (/^"/.test(match)) {
                cls = /:$/.test(match) ? 'json-key' : 'json-string';
            } else if (/true|false/.test(match)) {
                cls = 'json-boolean';
            } else if (/null/.test(match)) {
                cls = 'json-null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }

    function UpStatus(e){
        const status = $(e)[0].checked;
        const item_id = $(e).attr('data-id');
        if (status === true){
            collect_status = 1
        } else{
            collect_status = 0
        }
        $.ajax({
            url: '/website/update_node_status',
            type: 'get',
            data: {'id': item_id, 'collect_status': collect_status},
            success: function (res) {
                if (res.code===200){
                    console.log('更新状态')
                }else if (res.code===400){
                    alert(res.message)
                }else {
                    alert('系统异常')
                }
            }
        })
    }
    function Check(e){
        const node_type = $(e).val();
        var formValues = {};
        if (node_type == 1){
          const formElements = document.querySelectorAll('#static-form input');
          formElements.forEach(element => {
            if (element.type === 'radio') {
              if (element.checked) {
                formValues[element.name] = element.value;
              }
            } else {
              formValues[element.name] = element.value;
            }
          });

        }else if (node_type == 2){
            function syntaxHighlight(json) {
                if (typeof json != 'string') {
                    json = JSON.stringify(json, null, 2);
                }
                json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                return json.replace(
                    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
                    function(match) {
                        var cls = 'json-number';
                        if (/^"/.test(match)) {
                            if (/:$/.test(match)) {
                                cls = 'json-key';
                            } else {
                                cls = 'json-string';
                            }
                        } else if (/true|false/.test(match)) {
                            cls = 'json-boolean';
                        } else if (/null/.test(match)) {
                            cls = 'json-null';
                        }
                        return '<span class="' + cls + '">' + match + '</span>';
                    }
                );
            }
            const rows = document.getElementById('detail-form').querySelectorAll('tbody tr');
            const result = [];
            rows.forEach(row => {
                var rowData;
                const label_name = row.querySelector('[data-model-name="filed"]').getAttribute('data-value')
                if (label_name != 'source_url'){
                    rowData ={
                        checked: row.querySelector('.toggle-btn').checked ? 'on' : 'off',
                        rule_type: row.querySelector('input[type="radio"]:checked').value,
                        value: row.querySelector('[class="rule-input"]').value
                    };
                }else{
                    rowData ={
                        checked: row.querySelector('.toggle-btn').checked ? 'on' : 'off',
                        rule_type: '',
                        value: row.querySelector('[class="rule-input"]').value
                    };
                }
                const labelData = {[label_name]: rowData}
                result.push(labelData);
            });
            formValues = {
                detail_url: document.querySelector('#detail-form input[name="detail_url"]').value,
                website_id: document.querySelector('#detail-form input[name="website_id"]').value,
                node_type: document.querySelector('#detail-form input[name="node_type"]').value,
                column_rule: result
            }

        }
      var loadingIndex = layer.msg('正在加载数据...', {
            icon: 16,
            shade: 0.01,
            time: 0
      });
        $.ajax({
                url: '/website/check_rule',
                type: 'GET',
                data: formValues,
                success: function(response) {
                    layer.close(loadingIndex);

                    // 格式化JSON数据
                    var formattedJson = formatJson(response.data);

                    // 弹出包含格式化JSON的弹窗
                    layer.open({
                      type: 1,
                      title: 'JSON数据查看器',
                      area: ['800px', '600px'],
                      shadeClose: true,
                      content: '<div class="json-container"><pre>' + formattedJson + '</pre></div>',
                      btn: ['关闭'],
                      success: function(layero, index){
                        // 添加折叠功能
                        var pre = layero.find('pre');
                        pre.on('click', function(e){
                          if (e.target.tagName === 'SPAN' && e.target.classList.contains('json-key')) {
                            var next = e.target.nextSibling;
                            if (next && next.nodeType === 3 && next.nodeValue.trim() === ':') {
                              var parent = e.target.parentNode;
                              if (parent.nextSibling && parent.nextSibling.nodeType === 1) {
                                var target = parent.nextSibling;
                                target.style.display = target.style.display === 'none' ? '' : 'none';
                              }
                            }
                          }
                        });
                      }
                    });
                },
                error: function(xhr) {
                    layer.close(loadingIndex);
                    layer.alert('请求失败，请重试', {icon: 2});
                }
            });
    }


</script>
</body>
</html>
